<div class="wrapper">
    <app-breadcrumb [path]="path"></app-breadcrumb>
    <app-scrollview class="scrollview">
        <div *ngIf="user;then showUser;else loadUser"></div>
        <ng-template #showUser>
            <div id="UserEdit" *ngIf="user">
                <form class="ui form">
                    <div class="ui grid">
                        <div class="ui row">
                            <div class="ten wide column">
                                <div class="field">
                                    <label>{{'user_label_username' | translate}}</label>
                                    <input class="ui input" type="text" name="username" [(ngModel)]="user.username"
                                        [disabled]="loading">
                                </div>
                                <div class="field">
                                    <label>{{'user_label_fullname' | translate}}</label>
                                    <input class="ui input" type="text" name="fullname" [(ngModel)]="user.fullname"
                                        [disabled]="loading">
                                </div>
                                <div class="field">
                                    <label>{{'user_label_email' | translate}}</label>
                                    <input class="ui input" type="text" name="email" [(ngModel)]="user.email"
                                        [disabled]="loading">
                                </div>
                                <div class="field" *ngIf="currentUser.admin">
                                    <div class="ui checkbox">
                                        <input type="checkbox" id="admin" name="admin" [(ngModel)]="user.admin"
                                            [disabled]="loading">
                                        <label for="admin">{{'user_label_admin' | translate}}</label>
                                    </div>
                                </div>
                                <div class="field inline">
                                    <app-delete-button *ngIf="user && user.id && currentUser.admin && user.username !== currentUser.username"
                                        class="left floated" (event)="clickDeleteButton()" [loading]="deleteLoading"></app-delete-button>
                                    <button class="ui green right floated button" [class.loading]="loading" (click)="clickSaveButton()">
                                        <i class="save icon"></i>{{ 'btn_save' | translate }}
                                    </button>
                                </div>

                                <h3>{{ 'group_list_title' | translate }}</h3>
                                <table class="ui selectable fixed celled table" *ngIf="groups || groupsAdmin">
                                    <thead>
                                        <tr>
                                            <th class="three wide">{{ 'group_name' | translate }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr *ngFor="let v of groupsAdmin">
                                            <td class="border">
                                                <a class="ui" [routerLink]="['/settings', 'group', v?.name]">
                                                    <div class="ui">
                                                        <i class="fa fa-user-circle-o" title="{{ 'group_user_is_admin' | translate }}"></i>
                                                        {{v?.name}}
                                                    </div>
                                                </a>
                                            </td>
                                        </tr>
                                        <tr *ngFor="let v of groups">
                                            <td class="border">
                                                <a class="ui" [routerLink]="['/settings', 'group', v?.name]">
                                                    <div class="ui">{{v?.name}}</div>
                                                </a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                            </div>

                            <div class="six wide column">
                                <div class="ui center aligned segment">
                                    <h2 class="ui header"><i class="fa fa-book"></i> {{ 'settings_tips' | translate }}</h2>
                                    <a class="circular ui blue button" href="https://ovh.github.io/cds" target="_blank">{{
                                        'common_see_documentation' | translate }}</a>
                                </div>
                            </div>
                        </div>
                        <div class="ui row" *ngIf="username === this.currentUser.username">
                            <div class="sixteen wide column">
                                <h3>{{'token_title_handling' | translate}}</h3>
                                <ng-container *ngIf="!tokensLoading">
                                    <app-token-list [tokens]="tokens" [displayAdd]="false" (event)="tokenEvent($event)"></app-token-list>
                                </ng-container>
                                <ng-container *ngIf="tokensLoading">
                                    <div class="ui text active loader">{{ 'token_loading' | translate }}</div>
                                </ng-container>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </ng-template>
        <ng-template #loadUser>
            <div class="ui text active loader">{{ 'user_load_user' | translate }}</div>
        </ng-template>
    </app-scrollview>
</div>